<template>
  <Card :bordered="false" dis-hover>
    <div>
      <Form class="ivu-mb-16 ivu-pt-8">
        <DatePicker :editable="false"
          v-width="200"
          type="daterange"
          v-model="params.time"
          placeholder="请选择接收/发出时间"
          @on-change="changeTime"
          format="yyyy-MM-dd"
          :options="options"
        />
        <Input
          class="ivu-ml-8"
          v-width="260"
          placeholder="请输入设备别名、手机号"
          v-model="params.keyword"
          @on-enter="keywordEv"
          clearable
          @on-clear="clearKeyword"
        />
        <Select
          class="ivu-ml-8"
          v-width="150"
          v-model="params.type"
          placeholder="请选择呼叫类型"
          @on-change="changeType"
          clearable
        >
          <Option
            v-for="item in typeList"
            :value="item.name"
            :key="item.name"
            >{{ item.label }}</Option
          >
        </Select>
      </Form>
      <Table highlight-row
        :columns="columns"
        :data="dataList"
        :loading="loading"
        border
      >
        <template slot="type" slot-scope="{ row }">
          <Tag v-if="row.type === '1'" color="volcano">发送</Tag>
          <Tag v-else color="cyan">接收</Tag>
        </template>
        <template slot="action" slot-scope="{ row }">
          <a
            v-hasC="{
              name: 'customer-sms-sms-del',
              flag: 'v1/customer/sms/sms-del',
            }"
            @click="deleteItem(row)"
            >删除</a
          >
        </template>
      </Table>
      <div class="ivu-mt ivu-text-center">
        <Page
          :total="total"
          :current.sync="params.page"
          show-elevator
          show-sizer
          show-tota
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        />
      </div>
    </div>
  </Card>
</template>
<script>
import { getSmsList, deleteSms } from "@/api/TApi/index.js";
export default {
  data() {
    return {
      options: {
        disabledDate(date) {
          return date && date.valueOf() >= new Date();
        },
      },
      loading: false,
      params: {
        page: 1,
        pageSize: 10,
        type: "",
        keyword: "",
        time: [],
      },
      dataList: [],
      total: 0,
      typeList: [],
      columns: [
        {
          title: "设备别名",
          key: "nickname",
          width: 165,
          tooltip: true,
          fixed: "left",
        },
        {
          title: "手机号码",
          key: "mobile",
          width: 150,
        },
        {
          title: "接收/发出时间",
          key: "send_time",
          width: 180,
        },
        {
          title: "短信内容",
          key: "content",
          tooltip: true,
          minWidth: 260,
        },
        {
          title: "类型",
          slot: "type",
          width: 100,
        },
        {
          title: "设备归属人",
          key: "account",
          width: 118,
        },
        {
          title: "操作",
          slot: "action",
          width: 90,
          fixed: "right",
        },
      ],
    };
  },
  computed: {},
  methods: {
    getData() {
      this.loading = true;
      let params = JSON.parse(JSON.stringify(this.params));
      delete params.time;
      params.start_time = this.params.time[0] ? this.params.time[0] : "";
      params.end_time = this.params.time[1] ? this.params.time[1] : "";
      getSmsList(params).then((res) => {
        this.dataList = res.list.list;
        this.total = res.list.total;
        this.typeList = res.callType;
        this.loading = false;
      });
    },
    // 切换分页
    changePage(value) {
      this.params.page = value;
      this.getData();
    },
    changePageSize(value) {
      this.params.pageSize = value;
      this.params.page = 1;
      this.getData();
    },
    // 切换时间
    changeTime(value) {
      this.params.page = 1;
      this.params.time[0] = value[0] === "" ? "" : value[0] + " 00:00:00";
      this.params.time[1] = value[1] === "" ? "" : value[1] + " 23:59:59";
      let timer = ["",""];
      if (JSON.stringify(this.params.time) !== JSON.stringify(["", ""])) {
          timer = [this.$Date(this.params.time[0]).format('YYYY-MM-DD'),this.$Date(this.params.time[1]).format('YYYY-MM-DD')]
      }
      this.storage.set('robot-message',timer )
      this.getData();
    },
    // 切换类型
    changeType(value) {
      if (value) {
        this.params.page = 1;
        this.getData();
      } else {
        this.params.page = 1;
        this.params.type = "";
        this.getData();
      }
    },
    keywordEv() {
      if (JSON.stringify(this.params.time) !== JSON.stringify(["", ""])) {
          let timer = [this.$Date(this.params.time[0]).format('YYYY-MM-DD'),this.$Date(this.params.time[1]).format('YYYY-MM-DD')]
          this.storage.set('robot-message',timer )
          this.params.time = ["",""];
      }
      this.params.type = "";
      this.params.page = 1;
      this.getData();
    },
    clearKeyword() {
      if (JSON.stringify(this.storage.get('robot-message'))!== JSON.stringify(["", ""])) {
          this.params.time = this.storage.get('robot-message')
      }
      this.getData();
    },
    deleteItem(data) {
      this.$Modal.confirm({
        title: "操作提示",
        content: "确定删除此条短信记录？",
        onOk: () => {
          deleteSms({
            id: data.id,
          }).then((res) => {
            this.$Message.success("删除成功");
            this.getData();
          });
        },
      });
    },
  },
  mounted() {
    this.storage.set('robot-message',["",""] )
    this.getData();
  },
};
</script>
